@import ../base/global

// config
$table-border: darken($tertiary-color, 5%)
$table-font-size: 16px
$table-padding: 14px 16px
$table-bg: $global-support-background
$table-even-bg: $global-background

=table-row-variant($name, $color, $hover-modifier)
  .table__tr--#{$name}
    border-left: rem(4px) solid $color

    &:hover
      background: lighten($color, $hover-modifier)

.table
  font:
    family: $global-font
    size: rem($table-font-size)
    weight: $global-font-weight
  margin-bottom: rem(40px)
  line-height: 1.4

.table__tr
  border-bottom: 1px solid $table-border
  box-sizing: border-box
  border-left: rem(4px) solid transparent

  &:nth-child(even)
    background: #fafafa

  &:hover
    background: #f4f4f4

+table-row-variant(primary, $primary-color, 48%)

.table__td,
.table__th
  padding: rem($table-padding)

.table__th
  border-bottom: 1px solid #ccc

.table__container
  overflow-x: auto

.table--full-size
  width: 100%

.table--fixed
  table-layout: fixed
